<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>003-html链接</title>
	</head>
	<body>
		<!--
		一个未访问过的链接显示为蓝色字体并带有下划线。
		访问过的链接显示为紫色并带有下划线。
		点击链接时，链接显示为红色并带有下划线。
		-->

		<!--
		href：指定链接目标的URL，这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。
		target（可选）：指定链接如何在浏览器中打开。常见的值包括 _blank（在新标签或窗口中打开链接）和 _self（默认在当前标签或窗口中打开链接）。
		title（可选）：提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。
		rel（可选）：指定与链接目标的关系，如 nofollow、noopener 等。
		-->

		<!--
		基本的注意事项:
		请始终将正斜杠添加到子文件夹。假如这样书写链接：href="https://www.runoob.com/html"，就会向服务器产生两次 HTTP 请求。
		这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="https://www.runoob.com/html/"。
		-->

		<!-- 【文本/图片链接】 -->
		<a href="https://www.baidu.com/" target="_blank" title="百度一下" rel="nofollow"> 百度 </a>

		<br />

		<a href="https://www.baidu.com/" target="_blank" title="图片链接">
			<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width="100" />
		</a>

		<hr />

		<!-- 【下载链接】 如果您希望链接用于下载文件而不是导航到另一个网页，可以使用 download 属性 -->
		<a target="_blank" href="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" download="图片.png">
			下载图片（download 属性部分浏览器不支持）
		</a>

		<br />

		<a target="_blank" href="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">外部预览图片</a>

		<hr />

		<!-- 【执行JS脚本】 -->
		<a href="javascript:alert('Hello, World!');">执行JS脚本</a>

		<hr />

		<!-- 【锚点链接】 -->
		<a href="#section1"> 跳转到id锚点链接 </a>
		<a href="#ababab"> 跳转到name锚点链接 </a>
		<br />
		<a target="_blank" href="003-html外部页面锚点链接.html#content"> 跳转到外部网页内的锚点链接 </a>

		<!-- 设置锚点方式一（H5标准推荐方式） -->
		<h2 id="section1" style="margin-top: 1000px">锚点链接</h2>
		<!-- 设置锚点方式二 -->
		<a name="ababab"></a> 锚点位置，也可以使用a标签 + name属性 或 id属性

		<!-- 【回到顶部链接】 -->
		<hr />
		<a href="#">回到顶部(不刷新页面)</a>
		<!-- <a href="">回到顶部(会刷新页面)</a> -->
		<hr />
	</body>
</html>
